<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div style="text-align: center; margin-top: 10px">
          <div>
            <span v-if="isExamine == 1">您申请的权限正在审核中</span>
            <span v-else>
              <el-tag v-if="roleId == 1 && isExamine == 2">院级管理员</el-tag>
              <el-tag v-if="roleId == 2 && isExamine == 2">校级管理员</el-tag>
            </span>
          </div>
          <div v-if="isExamine == 0" style="margin-top: 10px">
            <span>您尚未获得任何权限</span>
          </div>
          <el-badge
            :value="count"
            class="item"
            style="float: right; margin-right: 10px"
          >
            <el-link type="primary" @click="onHistory">申请历史</el-link>
          </el-badge>
          <el-dialog
            title="申请历史"
            :visible.sync="dialogTableVisible"
            class="table"
          >
            <div style="margin-top: -30px">
              <el-table
                :data="historyData"
                style="width: 100%; margin-top: -30px"
                :row-class-name="tableRowClassName"
                highlight-current-row
                @current-change="handleCurrentChange"
                height="400"
              >
                <el-table-column prop="examtime" label="审核时间">
                </el-table-column>
                <el-table-column prop="result" label="审核结果">
                </el-table-column>
                <el-table-column prop="reason" label="原因"> </el-table-column>
              </el-table>
            </div>
          </el-dialog>
          <el-dropdown
            @command="clickAcad"
            v-if="isExamine != 1 && roleId != 2"
            style="margin-right: 10px; float: left"
          >
            <el-button type="primary">
              申请权限<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">院级管理者</el-dropdown-item>
              <el-dropdown-item command="2">校级管理者</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div v-if="isExamine == 1">
            <el-button style="margin-top: 10px" type="primary" @click="onFrush"
              >刷新</el-button
            >
          </div>
          <el-button
            v-if="(roleId == 1 || roleId == 2) && isExamine == 2"
            style="float: left"
            type="primary"
            icon="el-icon-plus"
            @click="dialogFormVisible = true"
            >添加教师</el-button
          >
        </div>
      </div>
      <!-- 添加教师弹框 -->
      <el-dialog title="添加教师" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="教师ID">
            <el-input
              v-model="form.bindid"
              placeholder="请输入教师ID"
              autocomplete="off"
              style="width: 300px; margin-right: 20px"
            ></el-input>
            <el-button type="primary" style="maegin-left: 10px" @click="findId"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="学院名">
            <el-input
              v-model="form.groupname"
              style="width: 300px"
              placeholder="请输入学院名"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTeacher">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 显示添加的教师的弹框 -->
      <el-dialog
        title="教师信息"
        :visible.sync="showTea"
        style="text-align: center"
      >
        <div>
          <el-row :gutter="20">
            <el-col :span="10" style="text-align: right; margin-right: 10px"
              ><span>姓名</span></el-col
            >
            <el-col :span="12" style="text-align: left"
              ><span>{{ findTea.name }}</span></el-col
            >
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="10" style="text-align: right; margin-right: 10px"
              ><span>性别</span></el-col
            >
            <el-col :span="12" style="text-align: left"
              ><span>{{ findTea.sex }}</span></el-col
            >
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="10" style="text-align: right; margin-right: 10px"
              ><span>学校</span></el-col
            >
            <el-col :span="12" style="text-align: left"
              ><span>{{ findTea.university }}</span></el-col
            >
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="10" style="text-align: right; margin-right: 10px"
              ><span>学院</span></el-col
            >
            <el-col :span="12" style="text-align: left"
              ><span>{{ findTea.academy }}</span></el-col
            >
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="10" style="text-align: right; margin-right: 10px"
              ><span>专业</span></el-col
            >
            <el-col :span="12" style="text-align: left"
              ><span>{{ findTea.major }}</span></el-col
            >
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="10" style="text-align: right; margin-right: 10px"
              ><span>地址</span></el-col
            >
            <el-col :span="12" style="text-align: left"
              ><span>{{ findTea.address }}</span></el-col
            >
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="10" style="text-align: right; margin-right: 10px"
              ><span>邮箱</span></el-col
            >
            <el-col :span="12" style="text-align: left"
              ><span>{{ findTea.email }}</span></el-col
            >
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="10" style="text-align: right; margin-right: 10px"
              ><span>电话</span></el-col
            >
            <el-col :span="12" style="text-align: left"
              ><span>{{ findTea.phone }}</span></el-col
            >
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showTea = false">取 消</el-button>
          <el-button type="primary" @click="showTea = false">确 认</el-button>
        </div>
      </el-dialog>
      <div v-if="(roleId == 1 || roleId == 2) && isExamine == 2">
        <el-table :data="teacherList" border style="width: 100%">
          <el-table-column prop="avatar" label="头像" align="center">
            <template slot-scope="scope">
              <el-avatar :size="35" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="发起人" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.name }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="groupname" label="学院" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.groupname }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="bindid" label="绑定ID" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.bindid }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.email }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.phone }}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >查看活动</el-button
              >
              <el-button
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next,jumper"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            :page-sizes="[5, 10, 15]"
            :total="total"
          ></el-pagination>
        </div>
        </el-table>
        
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      roleId: '',
      isExamine: '',
      teacherList: [],
      dialogFormVisible: false,
      showTea: false,
      form: {
        bindid: '',
        groupname: '',
      },
      findTea: {},
      pageNum: 1,
      pageSize: 10,
      // 分页
      total: 0,
      dialogTableVisible: false,
      historyData: [],
      count: '',
      uid:''
    }
  },
  created() {
    this.onFrush()
    this.selectList()
    this.selectResult()
    this.uid = window.sessionStorage.getItem('uid')
  },
  methods: {
    // 实现分页
    // 更改了每页大小
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      // console.log("val",val)
      // 请求对应的分页数据
      this.selectList()
    },
    // 更改了第几页
    handleCurrentChange(val) {
      this.pageNum = val
      this.selectList()
    },
    // 获取当前管理权限信息
    async clickAcad(e) {
      const { data: res } = await this.$http.get('/auth/requestForAccess', {
        params: {
          uid: this.uid,
          roleId: e,
        },
      })
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: 'success',
          duration: 1000,
        })
        const { data: res1 } = await this.$http.get('/auth/findExamineState', {
          params: {
            uid:  this.uid,
          },
        })
        if (res1.code == 200) {
          this.isExamine = res1.data.isexamine
        }
      }
    },
    // 查找教师ID信息
    async findId() {
      const { data: res } = await this.$http.get('/auth/selectBindid', {
        params: {
          bindid: this.form.bindid,
        },
      })
      if (res.code == 200) {
        this.findTea = res.data
        this.showTea = true
      } else {
        this.$message.error(res.message)
      }
    },
    // 添加教师
    async addTeacher() {
      const { data: res } = await this.$http.get('/admin/join', {
        params: {
          uid:  this.uid,
          bindid: this.form.bindid,
          groupname: this.form.groupname,
        },
      })
      if (res.code == 200) {
        this.selectList()
        this.$message.success(res.message)
        this.dialogFormVisible = false
      } else {
        this.$message.error(res.message)
      }
    },
    // 获取管理教师列表
    async selectList() {
      const { data: res } = await this.$http.get('/admin/selectList', {
        params: {
          uid:  this.uid,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
      })
      if (res.total > 0) {
        this.teacherList = res.member
        this.total = res.total
      } else {
        this.teacherList = []
        this.total = res.total
      }
    },
    // 点击跳转到某一教师签到活动页面
    handleEdit(index, val) {
      this.$router.push({ path: 'adminsignList', query: { tid: val.uid } })
    },
    // 删除被管理成员
    async handleDelete(index, val) {
      const { data: res } = await this.$http.get('/admin/deleAdminGroup', {
        params: {
          uid: this.uid,
          bindid: val.bindid,
        },
      })
      if (res.code == 200) {
        this.$message.success(res.message)
        this.selectList()
      } else {
        this.$message.error(res.message)
      }
    },

    // 查询申请历史
    async selectResult() {
      const { data: res } = await this.$http.get('/auth/selectResult', {
        params: {
          uid:  this.uid,
        },
      })

      if (res.code == 200) {
        this.historyData = res.data.list
        if (res.data.count == 0) {
          this.count = ''
        } else {
          this.count = res.data.count
        }
      }
    },
    // 申请记录
    onHistory() {
      this.selectResult()
      this.dialogTableVisible = true
    },
    // 刷新
    async onFrush() {
      const { data: res } = await this.$http.get('/auth/findExamineState', {
        params: {
          uid:  this.uid,
        },
      })
      if (res.code == 200) {
        this.selectResult()
        this.roleId = res.data.roleid
        this.isExamine = res.data.isexamine
      }
    },

    // 更新已读
    async updateIsRead(row) {
      const { data: res } = await this.$http.get('/auth/updateIsRead', {
        params: {
          uid:  this.uid,
          id: row.id,
        },
      })

      if (res.code == 200) {
      }
    },

    handleCurrentChange(val) {
      if (val.isread == 0) {
        this.updateIsRead(val)
        this.selectResult()
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if (row.isread === 0) {
        return 'warning-row'
      }
      return ''
    },
  },
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.table .el-dialog__body /deep/ {
  padding: 0px 20px !important;
}
</style>
